<template>

  <div class="app-container">
    <div >
      <el-row :gutter="20">



        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">

              <el-tab-pane label="任务详情" name="detail">
           
                 

        <table class="task" style="border-spacing: 0;border-collapse: collapse; border: 1px solid #f4f4f4;width: 100%;">
        <tr style="background-color: #3c8dbc80;"><td>Name</td><td>Content</td></tr>
        <tr style="padding-top: 10px;padding-bottom: 10px;">
            <td style="background-color: gainsboro;">AnsibleID</td>
            <td style="background-color: #d0eae9;">{{ resp.AnsibleID }}</td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">CeleryID</td>
                <td style="background-color: #d0eae9;">{{ resp.CeleryID }}</td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">GroupName</td>
                <td style="background-color: #d0eae9;">{{ resp.GroupName }}</td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">playbook</td>
                <td style="background-color: #d0eae9;">{{ resp.playbook }}</td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">ExtraVar</td>
                <td style="background-color: #d0eae9;"><pre style="height:auto"></pre></td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">AnsibleResult<br>
                        <button id="nr" class="btn btn-default" style="margin-top:50px" >结果轮寻</button>
                </td>
                <td style="background-color: #d0eae9;" ><pre style="background: #a5a3a3;white-space: pre-wrap;">{{ resp.AnsibleResult | jsonparse }}</pre></td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">CeleryResult</td>
                <td  style="background-color: #d0eae9;"><pre style="height:auto">{{ resp.CeleryResult | jsonparse }}</pre>  </td>
        </tr>
        <tr>
                <td style="background-color: gainsboro;">CreateTime</td>
                <td  style="background-color: #d0eae9;">{{ resp.CreateTime }}</td>
        </tr>
      </table>


              </el-tab-pane>

              <el-tab-pane label="任务流程" name="process" >


                    <div class="block" style="">
                      <el-timeline>
                        <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.result.start" placement="top">
                          <el-card>
                            <h4>任务主机：<b style="color:blue">{{ item.host }}</b> <br>任务名称：<b style="color:blue">{{ item.task }}</b></h4>
                            <!-- <p style="color: #0089ff">{{ item.status }}</p> -->
                            <div v-if="item.module"><b>执行模块：</b>{{ item.module.action }}</div>
                            <div v-if="item.module"><b>模块参数：</b>{{ item.module.args }}</div>
                            <div v-if="item.result.msg"><b>MSG输出：</b>{{ item.result.msg }}</div>
                            <div v-if="item.result.stdout"><b>结果输出：</b>{{ item.result.stdout }}</div>
                            <div v-if="item.result.stderr" style="color:red"><b>错误输出：</b>{{ item.result.stderr }}</div>
                            <div v-if="item.result.end" style="color:green"><b>结束时间：</b>{{ item.result.end }}</div>
                            <el-tag :type="item.status==='success'? '' : 'danger'">{{ item.status | uppercaseFirst }}</el-tag>
                            <el-tag :type="item.result.changed ? 'warning' : ''">Changed</el-tag>
                          </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="任务结束">
                        </el-timeline-item>
                      </el-timeline>
                    </div>




              </el-tab-pane>


            </el-tabs>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-card>
          <p>Ansible 任务执行结果</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  

</template>

<script>
import { fetchList } from '@/api/ansibleui'
import { mapGetters } from 'vuex'
export default {

  data() {
    return {
      activeTab: 'detail',
      detailT: ['AnsibleID', 'CeleryID', 'task_user', ],
      resp: {},
      timeline: []
    }
  },
  filters: {
    jsonparse: function(msg){
      return JSON.parse(msg)
    }
  },
  created(){
      const id = this.$route.params && this.$route.params.id
      this.id = id
      this.getDetail()
  },
  methods: {
    async getDetail() {
      this.listLoading = true
      var data = await fetchList('ansible_tasks/'+this.id, this.listQuery)
      this.resp = data.data.items
      this.timeline = JSON.parse(this.resp['AnsibleResult'])
      // console.log(resp['AnsibleResult'])
    },
    
  }
}
</script>
<style scoped>
 td {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    border: 1px solid #f4f4f4;
    font-size: smaller;
 }
</style>